<template>
    <view class="container">
        <!-- 顶部区域 -->
		<view class="can-scroll">
			<view class="toparea">
				<view class="top-logo"></view>
				<view class="top-mid">
					<view>
						<div class="clarify"><p>中医生与信息科学教授团队联合出品</p></div>
					</view>
					<view class="sentence">心有膳本医，天地皆方圆</view>
				</view>
				<i class="iconfont">&#xe6a3;</i> <!-- 消息图标 -->
				<view class="decration-back1"></view>
				<view class="decration1"></view>
			</view>

			<!-- 日历部分 -->
			<view class="calendar">
				<view class="calendar-left">
					<view class="date-box">
						<text class="day">18</text>
						<view class="date-info">
							<text class="year-month">2023年11月</text>
							<text class="week">星期六</text>
						</view>
					</view>
					<view class="suitable">今日宜：早睡早起，清淡饮食</view>
				</view>
				<view class="calendar-right">
					<!-- <text class="desc">处暑无三日，新凉直万金。<br>白头更世事，青草印禅心。</text> -->
					<text class="liqiu">立秋</text>
					<text class="jinri">今<br>日</text>
				</view>
			</view>

			<!-- 健康自查模块 -->
			<view class="health-check">
				<view class="title-wrap"><text class="before-title">|</text><text class="title">每日健康自查</text></view>
				<view class="check-card">
					<view class="icon">
						<view class="icon-circle">
							<view class="icon-inner"></view>
						</view>
					</view>
					<view class="card-content">
						<p class="card-title">今日舌象打卡</p>
						<p class="card-desc">每日打卡赠送会员报告解锁100次</p>
						<p class="status">今日还没测试哦~</p>
						<button class="test-btn" @click="goToTest" >马上测一测</button>
					</view>
					<view class="check-card-top"></view>
				</view>
				<view class="function-cards">
					<view class="function-card red-card">
						<navigator url="#">
							<view class="iconfont">&#xe6aa;</view> 
							<p class="func-title">生活问诊</p>
							<p class="func-desc">专业医师在线解答</p>
						</navigator>
					</view>
					<view class="function-card green-card">
						<navigator url="#">
							<view class="iconfont">&#xe6a9;</view> 
							<p class="func-title">养生日历</p>
							<p class="func-desc">个性化健康建议</p>
						</navigator>
					</view>
				</view>
			</view>
			
			<!-- 每日推荐 -->
			<div class="health-command">
				<div class="decration-back2"></div>
				<div class="decration2"></div>
				<div class="title-wrap"><span class="before-title">|</span><span class="title">健康推送</span></div>
				<div class="command-content"></div>
			</div>
			<div class="back-decoration"></div>
		</view>
        <!-- 底部导航 -->
        <view class="bottom-bar">
            <navigator url="/pages/index/index" class="item">
                <view class="shouye"></view>
                <p>首页</p>
            </navigator>
            <navigator url="/pages/shop/shop" class="item">
                <view class="yaocai"></view>
                <p>药材</p>
            </navigator>
            <navigator url="/pages/user/user" class="item">
                <view class="wode"></view>
                <p>我的</p>
            </navigator>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {}
    },
    onLoad() {
		
	},
	methods: {
	    goToTest() {
	      // 跳转到目标页面，路径需要根据你的项目结构修改
	      uni.navigateTo({
	        url: '/pages/diagnose/diagnose' // 目标页面的路径
	      })
	    }
	}
}
</script>

<style scoped>
/* 引入公共样式 */
@import "../../common/common.css";
@import "../../static/icon/font/iconfont.css";
@font-face {
            font-family: 'ZhiMangXing';
            src: url('https://assets-persist.lovart.ai/agent-static-assets/ZhiMangXing-Regular.ttf') format('truetype');
        }
		
/* 首页特有样式 */
.container {
	width: 750rpx;
	margin: auto;
	min-height: 100vh;
	position:relative;
	overflow:hidden;
}
.toparea {
    padding: 15rpx 20rpx;
    display: flex;
    align-items: center;
	position: relative;
}
.top-logo {
    width: 13%;
    height: 94rpx;
	background-image: url("../../static/icon/sucai.png");
    background-position: -308rpx -179rpx;
	background-size: 679rpx auto;
}

.top-mid{
	width: 75%;
	display: flex;
	flex-direction: column;
}
.top-search {
	width:100%;
	margin:0;
	padding-top: 15rpx;
	display: flex;
	justify-content: center;
	position:relative;
	align-items: center;
}
.sentence{
	width:100%;
	margin-top:18rpx;
	font-size: 36rpx;
	text-align: center;
	font-family: 'ZhiMangXing';
}
.search{
	width:100%;
	height: 40rpx;
	padding-left: 36rpx;
	font-size: 16rpx;
	border: 1rpx solid #c5c4c4;
	border-right: none;
	box-shadow: inset 4rpx 4rpx 8rpx #d9d6d2, 
				inset -4rpx -4rpx 8rpx #ffffff;
	outline: none;
}
.top-search .iconfont{
	font-size: 24rpx;
	position: absolute;
	top:22rpx;
	left:8rpx;
}
.search-btn{
	width: 15%;
	height: 40rpx;
	font-size: 16rpx;
	border-radius: 0 20rpx 20rpx 0;
	border: none;
	background-color: rgb(160, 175, 110);
	color:#fff;
	white-space: nowrap; 
	display: flex;
	justify-content: center; 
	align-items: center; 
}

.clarify{
	font-size: 16rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	background-color: rgba(110,189,204,0.4);
	margin-top: 12rpx;
}
.toparea>.iconfont{
	font-size: 60rpx;
	padding-bottom: 22rpx;
	padding-left: 20rpx;
	margin:0rpx 0rpx;
	border-radius: 40rpx;
}

/*日历部分*/
.calendar{
	width: 100%;
	height: 123rpx;
	border-top:1rpx solid #d1d1d1;
	border-bottom:1rpx solid #d1d1d1;
	margin-top: 15rpx;
	padding: 10rpx 10%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.calendar-left{
	width: 60%;
}
.date-box {
	height: auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	margin-right: 0rpx;
	text-align: center;
}
.day {
	font-size: 48rpx;
	font-weight: bold;
	line-height: 1;
	color: #2b6d3e;
	text-align: center;
}
.date-info {
	display: flex;
	flex-direction: column;
	padding-left: 28rpx;
}
.year-month {
	font-size: 16rpx;
	color: #666;

}
.week {
	font-size: 18rpx;
	color: #6fbbe7;
}
.calendar-right{
	display: flex;
	margin-right: 30rpx;
	padding-top: 6rpx;
	text-align: center;;
}
.jinri {
	font-size: 12rpx;
	color: #b71b1b;
	margin-bottom: 4rpx;
	margin-left: 10rpx;
	font-family: 'ZhiMangXing';
}
.liqiu {
	font-size: 50rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.2;
	align-items: center;
}
.desc {
	font-size: 14rpx;
	color: #666;
	line-height: 1.5;

}
.suitable {
	font-size: 12rpx;
	color: #b43c3c;
	align-self: center;
	margin-top: 5rpx;
	white-space: nowrap; 
}

/* 健康自查模块 */
.health-check {
	width: 90%;
	max-width: 750rpx;
	margin: 30rpx auto;
}
.before-title{
	font-size: 24rpx;
	font-weight: bold;
	margin:0 8rpx;
	color: #446269;
}
.title {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
}
.title-wrap{
	margin-bottom: 12rpx;
}
.check-card {
	height: 222rpx;
	display: flex;
	align-items: flex-start;
	background: rgba(173, 185, 134,0.9);
	border-radius: 50rpx 36rpx 36rpx 36rpx;
	padding:0;
	margin-bottom: 20rpx;
	box-shadow: 4rpx 4rpx 8rpx #c7c6c6, 
				-4rpx -4rpx 10rpx #f9f9f9;
	position: relative;
	z-index: 1;
}
.check-card-top{
	width: 100%;
	height: 100rpx;
	border-radius: 50rpx 36rpx 36rpx 50rpx;
	background: rgba(190, 153, 156,0.9);
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;

}

/* 舌象图标样式 */
.icon {
	margin-right: 15rpx;
	width: 13%;
	z-index: 2;
}

.icon-circle {
	width: 100rpx;
	height: 100rpx;
	border: 3rpx solid #fff;
	border-radius: 50%;
	display: flex;
	position: relative;
}

.icon-inner {
	width: 100rpx;
	height: 92rpx;
	background-image: url("../../static/icon/sucai.png");
	background-position: -201rpx 0rpx;
	background-size: 679rpx auto;
	z-index: 999;
	position: absolute;
	left: 0;
	top:1rpx;
}

/* 卡片内容区域 */
.card-content {
	width: 87%;
	z-index: 2;
	text-align: center;
	padding-right: 60rpx;
	padding-top: 20rpx;
}

.card-title {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 0rpx;
	color: #333;
}

.card-desc {
	font-size: 16rpx;
	line-height: 16rpx;
	color: #e0e0e0;
	background-color: rgba(0 , 0, 0, 0.1);
	padding: 5rpx 5rpx;
	border-radius: 5rpx;
	display: inline-block;
	margin-bottom: 30rpx;
}

.status {
	font-size: 14rpx;
	margin-bottom: 20rpx;
	color: #333;
}

/* 测试按钮样式 */
.test-btn {
	width: 44%;
	height: 36rpx;
	line-height: 36rpx;
	background-color: #fff;
	border: none;
	padding: 0rpx 18rpx;
	border-radius: 20rpx;
	font-size: 16rpx;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: inset 4rpx 4rpx 6rpx #d9d6d2, 
				inset -4rpx -4rpx 6rpx #ffffff;
	margin:auto;
}

.test-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
}

/* 功能卡片容器 */
.function-cards {
	display: flex;
	justify-content: space-between;
}

/* 单个功能卡片 */
.function-card {
	width: 48%;
	background-color: #fff;
	border-radius: 25rpx;
	padding: 20rpx;
	text-align: center;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	z-index:1;
}
.function-card:hover{
	width: 48.5%;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.5);
}
.red-card{
	background-color: rgba(190, 153, 156, 0.9);
}
.green-card{
	background-color: rgba(153, 181, 170, 1);
}
.red-card .iconfont{
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	color: #fff;
}
.green-card .iconfont{
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	color: #fff;
}

/* 功能卡片标题和描述 */
.func-title {
	font-size: 24rpx;
	margin-bottom: 5rpx;
	color: #333;
}

.func-desc {
	font-size: 12rpx;
	color: #555;
}

/* 每日推送*/
.health-command{
	width: 90%;
	margin: auto;
	position: relative;
	z-index: 2;
}
.command-content{
	width: 100%;
	height: 300rpx;
	background-color: #d6e0e1;
	border-radius: 25rpx;
	box-shadow: inset 4rpx 4rpx 16rpx #b0bec0, 
				inset -4rpx -4rpx 12rpx #b0b9ba;
	z-index: 2;
}
/* 装饰 */
.decration-back1{
	width: 100rpx;
	height: 92rpx;
	background-image: url("../../static/icon/sucai.png");
	background-position: -300rpx 0;
	background-size:679rpx auto;
	position: absolute;
	top:120rpx;
	right: 10rpx;
	opacity: 0.3;
}
.decration1{
	width: 100rpx;
	height: 138rpx;
	background-image: url("../../static/icon/sucai.png");
	background-position: 0 -15rpx;
	background-size:679rpx auto;
	position: absolute;
	top:100rpx;
	right: 20rpx;
	opacity: 0.5;
	animation: leaf-wave 2s infinite ease-in-out;
	transform-origin: center bottom;
}
/* 缩小尺寸*/
.decration-back2{
	width: 60rpx;  /* 原100rpx，缩小30% */
	height: 55.2rpx; /* 原92rpx，按比例缩小 */
	background-image: url("../../static/icon/sucai.png");
	background-position: -180rpx 0rpx; /* 按比例调整背景图位置 */
	background-size: 407.4rpx auto; /* 按缩放比例调整背景图大小 */
	position: absolute;
	top:-15rpx;
	left:20%;
	opacity: 0.3;
}

.decration2{
	width: 60rpx;   /* 原110rpx，缩小30% */
	height: 82.8rpx;  /* 原110rpx，按比例缩小 */
	background-image: url("../../static/icon/sucai.png");
	background-position: -60rpx 82.8rpx; /* 按比例调整背景图位置 */
	background-size: 407.4rpx auto; /* 按缩放比例调整背景图大小 */
	position: absolute;
	top:-15rpx;
	left:21%;
	animation: leaf-wave 2s infinite ease-in-out;
	transform-origin: left top;
	opacity: 0.5;
}
.back-decoration{
	width: 420rpx;
	height: 435rpx;
	background-image: url("../../static/icon/sucai.png");
	background-position: -600rpx 0;
	background-size: 1018.5rpx auto;
	position: absolute;
	bottom: 170rpx;
	right: 0rpx;
	z-index: 0;
	opacity: 0.3;
}
@keyframes leaf-wave{
	0% {
		transform: rotate(1deg); /* 初始旋转角度 */
	}
	50% {
		transform: rotate(-1deg); /* 中间旋转角度，与初始相反 */
	}
	100% {
		transform: rotate(1deg); /* 回到初始，循环往复 */
	}
}

</style>